<template>
  <div class="workMan">
    <el-tabs v-model="waterPlantId">
      <el-tab-pane
        v-for="(item, index) in waterPlant"
        :key="index.toString()"
        :label="item.title"
        :name="item.configurationid"
      >
        <iframe class="imageClo" :src="httpUrl"></iframe>
      </el-tab-pane>
    </el-tabs>
  </div>
  <img class="Czgybjt" src="/icon/Czgybjt.png" alt="">
</template>

<script>
import { postConfiguration } from '../../http/http'
import { waterPlant } from '../../components/List/wterList'
export default {
  data() {
    return {
      configurationId: '1773526834473443329',
      httpUrl: '',
      waterPlant,
      waterPlantId: '1776803194465787906',
    }
  },
  watch: {
    // 监听 deepData 对象的变化
    waterPlantId: {
      handler(newValue) {
        postConfiguration({ configurationId: newValue }).then((res) => {
          this.httpUrl = res.data
        })
      },
      // 设置 deep 选项为 true，以深度监听 deepData 的变化
      immediate: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.workMan{
  position: relative;
  // top: 0;
  // left: 0;
  padding:16px 16px 16px 66px;
  // background-image: url('/icon/Czgybjt.png');
  // background-repeat: no-repeat;
  // background-size: contain; /* 或者使用 'cover' 来保持图片的纵横比，但填满整个容器 */
  // background-position: center;
  z-index: 99;
}
.Czgybjt{
  position: absolute;
    background-repeat: no-repeat;
  background-size: contain; /* 或者使用 'cover' 来保持图片的纵横比，但填满整个容器 */
  background-position: center;
  width: 100%;
top: 0;
}
.imageClo {
  width: 100%;
  aspect-ratio: 1 / 0.4;
  // background: #03142c;
}

::v-deep .el-tabs__nav-scroll{
  // background: #EFF5FF;
  // border-radius: 8px;
  // // width: 288px;
  // height: 40px;
  // margin: 0px 16px;
  // line-height: 40px;
  background-image: linear-gradient(94deg, rgba(253,254,255,0.96) 21%, rgba(247,250,254,0.86) 100%);
box-shadow: 0px 2px 8px 0px rgba(10,35,59,0.1);
border-radius: 20px;
 display: flex;
 justify-content: center;
 padding: 0px 5px;
}
::v-deep.el-tabs--top .el-tabs__item.is-top:nth-child(2){
  padding-left: 20px;
}
::v-deep.el-tabs--top .el-tabs__item.is-top:last-child{
  padding-right: 20px;
}
// .el-tabs__nav .is-top{
//   justify-content: ;
// }
::v-deep .is-active{
  // width: 94px;
  // height: 32px;
  // background: rgba(255,255,255,0.90);
  // box-shadow: 0px 4px 18px 0px rgba(2,75,193,0.2);
  // border-radius: 8px;
  // margin-top:4px;
  background: rgba(42,135,255,0.15);
border-radius: 17px;
height: 34px;
margin-top: 3px;
}
::v-deep .el-tabs__active-bar{
display: none;
}

::v-deep .el-tabs__nav-wrap:after{
  background-color: transparent;
}
// ::v-deep .el-tabs__header{
//   background-image: url('/icon/Tcbj@2x.png');
//   background-repeat: no-repeat;
//   background-size: contain; /* 或者使用 'cover' 来保持图片的纵横比，但填满整个容器 */
//   background-position: center;
//   height: 60px;
//   line-height: 60px;
//   display: flex;
//     justify-content: center;
// }
::v-deep .el-dialog__header{
  padding-bottom:0px;
}
::v-deep .el-tabs__nav-wrap{
  top: 10px;
  display: flex;
  justify-content: center;
}
</style>
